<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
    <style>
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .yellow{
            width: 100px;
            height:100px;
            background-color: yellow;

        }
        .blue{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="app">
        <!--  v-model数据双向绑定  单个多选框      -->
        <input type="checkbox" v-model="isAgree"/>我同意此协议
        <p>用户{{isAgree?'同意':'不同意'}}此协议</p>
        <br/>
        <!--  v-model数据双向绑定  多个多选框      -->
        <h3>请选择一个你喜欢的颜色</h3>
        <input type="checkbox" value="红色" v-model="likeColor"/> <div class="red"></div>
        <input type="checkbox" value="黄色" v-model="likeColor"/> <div class="yellow"></div>
        <input type="checkbox" value="蓝色" v-model="likeColor"/> <div class="blue"></div>
        <p>你选择的颜色是{{likeColor.length===0?'':likeColor}}</p>
        <hr/>
        <!--  v-model数据双向绑定  单选框      -->
        <h3>调查问卷：请问你每天玩手机要花多久？</h3>
        <span><input type="radio" value="小于3小时" v-model="answer"/>小于3小时</span>
        <span><input type="radio" value="6小时左右" v-model="answer"/>6小时左右</span>
        <span><input type="radio" value="8小时左右" v-model="answer"/>8小时左右</span>
        <span><input type="radio" value="大于10小时" v-model="answer"/>大于10小时</span>
        <p>{{answer}}</p>
        <hr/>
        <!--  v-model数据双向绑定  下拉列表      -->
        <h3>梅庆军放学后一般喜欢干嘛</h3>
        <select v-model="hobby">
            <option value="吃">吃</option>
            <option value="喝">喝</option>
            <option value="嫖">嫖</option>
            <option value="赌">赌</option>
        </select>
        <P>{{hobby.length===0?'':hobby}}</P>
        <hr/>
        <!--  v-model数据双向绑定  文本框      -->
        <h3>请输入内容</h3>
        <textarea v-model.number.lazy.trim="msg"></textarea>
        <p>{{msg}}</p>
    </div>
    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    isAgree:false,
                    likeColor:[],
                    answer:'',
                    hobby:[],
                    msg:''
                }
            }
        })
    </script>
</body>
</html>